import React, { useImperativeHandle, forwardRef, useState } from 'react';
import { Row, Col, Button, Form, Input, Select, DatePicker } from 'antd';
import type { SelectProps, SpinProps } from 'antd';
import query from './query.less';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
// import { Moment } from 'moment';
// Select, DatePicker, Switch,
// import moment from 'moment';

const { Option } = Select;
const { RangePicker } = DatePicker;

interface Item {
  value: string;
  label: string;
}

interface QueryListItem extends SelectProps<SpinProps> {
  label?: string;
  name: string;
  type: string;
  tips?: string;
  dateTips?: string;
  selDefaultValue?: string;
  children?: Item[];
  dateChildren?: Item[];
  colNum: number;
  linkAge: boolean;
}

interface Props {
  flag: boolean;
  queryList: QueryListItem[];
  queryClick: (values: any) => void;
  resetClick: () => void;
  selectProp?: (type: string) => void;
}

const Query = ({ flag = true, queryList = [], queryClick, resetClick, selectProp, ...props }: Props, ref: any) => {
  // console.log(flag, queryList, queryClick, resetClick, '传递参数');
  const [form] = Form.useForm();
  // 展开收起状态
  const [expand, setExpand] = useState(false);

  // 处理ref转发
  useImperativeHandle(ref, () => ({
    getForm: () => {
      return form;
    },
  }));
  // 声明下拉事件
  let onSelectChange;
  // 处理不同类型的组件函数
  const itemType = (item: QueryListItem, index: number) => {
    let itemDom;
    switch (item.type) {
      case 'input':
        itemDom = (
          <Col span={item.colNum} order={index + 1} className={query.col}>
            <Form.Item name={item.name} label={item.label}>
              <Input placeholder={item.tips} allowClear className={query.queryForm} />
            </Form.Item>
          </Col>
        );
        break;
      case 'select':
        // 下拉事件
        onSelectChange = (value: string) => {
          console.log(form, '上面form');
          form.setFieldsValue({ [item.name]: value });
          if (item.linkAge === true) {
            selectProp && selectProp(value);
          }
        };
        itemDom = (
          <Col span={item.colNum} order={index + 1} className={query.col}>
            <Form.Item name={item.name} label={item.label}>
              <Select {...props} placeholder={item.tips} allowClear onChange={onSelectChange} className={query.queryForm}>
                {item?.children?.map((i) => (
                  <Option value={i.value}>{i.label}</Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        );
        break;
      case 'date':
        // 下拉事件
        onSelectChange = (value: string) => {
          console.log(form, '上面form');
          form.setFieldsValue({ [item.name]: value });
        };
        itemDom = (
          <Col span={item.colNum} order={index + 1} className={query.col}>
            <Form.Item name={item.name} label={item.label}>
              <div className={query.date}>
                <Select
                  className={query.dateSelect}
                  placeholder={item.dateTips}
                  defaultValue={item.selDefaultValue}
                  allowClear
                  onChange={onSelectChange}
                >
                  {item?.dateChildren?.map((i) => (
                    <Option value={i.value}>{i.label}</Option>
                  ))}
                </Select>
                <RangePicker className={query.datePicker} format="YYYY/MM/DD" />
                {/* defaultValue={item.defaultValue} */}
              </div>
            </Form.Item>
          </Col>
        );
        break;
      default:
        break;
    }
    return itemDom;
  };
  // 查询列表的外层通用结构 true为一行状态 false为多行状态并配置展开收起功能
  let renderDom;
  if (flag === true) {
    renderDom = (
      <>
        <Row gutter={24} className={query.row}>
          {queryList.map((item, index) => {
            const dom = itemType({ ...item }, index);
            return dom;
          })}
          <Col span={4} order={queryList.length + 1} className={`${query.btn} ${query.col}`}>
            <Button
              type="primary"
              htmlType="submit"
              className={`${query.queryBtn} ${query.changeBtn}`}
            >
              查询
            </Button>
            <Button onClick={resetClick} className={query.changeBtn}>
              重置
            </Button>
          </Col>
        </Row>
      </>
    );
  } else {
    let tempList = queryList.filter((item, index) => index < 4);
    console.log(queryList, 'queryList')
    renderDom = (
      <>
        {
          !expand ? <>
            <Row gutter={24} className={query.row}>
              {tempList.map((item, index) => {
                const dom = itemType({ ...item }, index);
                return dom;
              })}
              <Col span={5} order={tempList.length + 1} style={{ textAlign: 'right' }}>
                <Button
                  type="primary"
                  htmlType="submit"
                  className={`${query.queryBtn} ${query.changeBtn}`}
                >
                  查询
                </Button>
                <Button onClick={resetClick} className={query.changeBtn}>
                  重置
                </Button>
                <Button
                  type="text"
                  style={{ fontSize: 12 }}
                  onClick={() => {
                    setExpand(!expand);
                  }}
                >
                  {expand ? <UpOutlined /> : <DownOutlined />} {expand ? '收起' : '展开'}
                </Button>
              </Col>
            </Row>
          </> : <>
            <Row gutter={24} className={query.row}>
              {queryList.map((item, index) => {
                const dom = itemType({ ...item }, index);
                return dom;
              })}
                <Col span={5} order={queryList.length + 1} className={query.btnGroup}>
                  <Button
                    type="primary"
                    htmlType="submit"
                    className={`${query.queryBtn} ${query.changeBtn}`}
                  >
                    查询
                  </Button>
                  <Button onClick={resetClick} className={query.changeBtn}>
                    重置
                  </Button>
                  <Button
                    type="text"
                    style={{ fontSize: 12 }}
                    onClick={() => {
                      setExpand(!expand);
                    }}
                  >
                    {expand ? <UpOutlined /> : <DownOutlined />} {expand ? '收起' : '展开'}
                  </Button>
                </Col>
            </Row>
          </>
        }
      </>
    );
  }

  return (
    <>
      <Form form={form} className={query.form} onFinish={queryClick}>
        {renderDom}
      </Form>
    </>
  );
};

export default forwardRef(Query);
